<template>
	<div class="my-detail">
		
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
		  <van-swipe-item v-for="(item,i) in imgList">
				<van-image :src="item"></van-image>
			</van-swipe-item>		 
		</van-swipe>
		
		  <van-cell title="商品编号" :value="product.id" />	
	    <van-cell title="商品名称" :value="product.name" />	
	    <van-cell title="商品标题" :value="product.title" />	
	    <van-cell title="商品规格" :value="product.spec" />	
	    <van-cell title="硬盘" :value="product.disk" />	
	    <van-cell title="CPU" :value="product.cpu" />	
	    <van-cell title="内存" :value="product.memory" />	
	    <van-cell title="显卡" :value="product.video_card" />	
	    <van-cell title="分辨率" :value="product.resolution" />	
	    <van-cell title="上架时间" :value="product.shelf_time" />	
	    <van-cell title="单价" :value="product.price" />	
	    <van-button type="primary" size="large" @click="$router.back()">返回</van-button>	
	</div>	
</template>
<script>
import dayjs from 'dayjs'  //导入日期格式化模块

// 导入封装的接口
import { getProductDetailByIdAPI } from '@/api/product.js';
export default { 
	name:"ProductDetail",
	data(){			
		return {
			product:{},
			imgList:[],
		}
	},	
	created(){		
		const id= this.$route.params.id
		//根据id去后端获取对应商品的详细数据
		//使用封装后的接口
		getProductDetailByIdAPI(id).then(result => {
				// console.log(result);
				this.product = result.data;
				//上架时间格式化
				this.product.shelf_time = dayjs(this.product.shelf_time).format('YYYY-MM-DD HH:mm:ss')
				
				//获取轮播图片数组
				this.product.picList.forEach(item=>{
					 this.imgList.push(this.APIDomainName + item.md)
				})
		});	
			
	},
	methods:{
		onBack(){
			this.$router.back();			
		}
	}
};
</script>

<style scoped>
.my-detail{
    background-color: #ff7f27;
}